<template>
  <div>
    <el-dialog title="添加范围" :visible.sync="dialogFormVisible">
      <el-form :model="adddata" :rules="rules" ref="ruleForm">
        <el-form-item label="范围名称:" prop="value">
          <el-input
            v-model="adddata.value"
            placeholder="请输入名称"
            class="nameinput"
            :disabled="isedit ? namdis : namdis"
          ></el-input>
          <i
            class="el-icon-edit namedeit"
            v-if="isedit ? true : false"
            @click="namdis = !namdis"
          ></i>
        </el-form-item>
        <div>
          <ul class="title">
            <li>参数</li>
            <li>参数含义</li>
            <li>操作</li>
          </ul>
          <ul class="list" v-for="(item, i) in sopelist" :key="i">
            <li>
              <el-form-item>
                <el-input
                  v-model="item.param"
                  placeholder="请输入参数"
                  @change="ahange(item)"
                  :disabled="isedit ? disisedit[i] : false"
                ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item>
                <el-input
                  v-model="item.value"
                  placeholder="请输入参数含义"
                  @change="ahange(item)"
                  :disabled="isedit ? disisedit[i] : false"
                ></el-input>
              </el-form-item>
              <i
                class="el-icon-edit"
                v-if="isedit ? true : false"
                @click="edit(item, i)"
              ></i>
            </li>
            <li>
              <div class="dolist">
                <span @click="addlist(item)" v-show="sopelist.length === i + 1">
                  <i class="el-icon-plus"></i>
                  继续添加
                </span>
                <span @click="delelist(item)">
                  <i class="el-icon-close"></i>
                  删除
                </span>
              </div>
            </li>
          </ul>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closescope"> 取消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">
          {{ isedit ? "修改" : "确定" }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addscoped, updatascope, deleteScopeByid } from "@/api/scope.js";
export default {
  data() {
    return {
      adddata: {
        value: "",
      },
      id: 0,
      isedit: false,
      issubmit: false,
      rules: {
        value: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      disisedit: [],
      namdis: false,
      obj1: {},
      sId: 0,
      oldarr: [],
      oldobj: {},
      opstarr: [],
      newsarr: [],
      sopelist: [
        {
          addid: 0,
          param: "",
          value: "",
          scopeId: 0,
        },
      ],
      message: "",
      length: 0,
      delist: [],
      modifyList: [],
      delMoldata: [],
      delList: [],
      addList: [],
      dialogFormVisible: false,
    };
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.closescope();
        this.disisedit.filter((i) => {
          if (!i) {
            i = true;
          }
        });
        return false;
      }
      if (!this.isedit) {
        return false;
      }
      this.adddata.value = this.$parent.editname;
      this.sopelist = this.$parent.editdata;
      if (this.sopelist.length === 0) {
        this.sopelist = [
          {
            addid: 0,
            param: "",
            value: "",
            scopeId: this.id,
          },
        ];
        this.disisedit[0] = false;
        return false;
      }
      this.disisedit = [];
      this.sopelist.forEach((i) => {
        if (this.isedit) {
          i.param === "" && i.value === ""
            ? this.disisedit.push(false)
            : this.disisedit.push(true);
        } else {
          this.disisedit.push(false);
        }
      });
      this.length = this.sopelist.length;
    },
    isedit(val) {
      if (val) {
        this.namdis = true;
      } else {
        this.namdis = false;
      }
    },
  },
  methods: {
    edit(item, i) {
      this.disisedit[i] = !this.disisedit[i];
      this.oldobj = {
        id: item.id,
        param: item.param,
        value: item.value,
        scopeId: item.scopeId,
      };
      this.oldarr.push(this.oldobj);
      this.$forceUpdate();
    },
    ahange(data) {
      if (this.isedit) {
        this.oldarr.forEach((item) => {
          if (item.param !== data.item) {
            this.obj1 = {
              id: data.id,
              oldParam: item.param,
              newParam: data.param,
              oldValue: item.value,
              newValue: data.value,
              scopeId: data.scopeId,
            };
          }
          if (item.value !== data.value) {
            this.obj1 = {
              id: data.id,
              oldParam: this.obj1.oldParam,
              newParam: this.obj1.newParam,
              oldValue: item.value,
              newValue: data.value,
              scopeId: data.scopeId,
            };
          }
        });
        if (this.obj1.id) {
          this.modifyList = this.formateArrobj(this.modifyList, this.obj1);
        }
      }
    },
    formateArrobj(arr, obj) {
      const index = arr.findIndex((e) => e.id === obj.id);
      if (index === -1) {
        arr.push(obj);
      } else {
        arr.splice(index, 1);
        arr.push(obj);
      }
      return arr;
    },
    addlist(item) {
      if (item.param === "") {
        this.$message({
          type: "warning",
          message: "请输入参数",
        });
        this.issubmit = false;
        return false;
      }
      if (item.value === "") {
        this.$message({
          type: "warning",
          message: "请输入参数名称",
        });
        this.issubmit = false;
        return false;
      }
      this.issubmit = true;
      this.sId++;
      const obj = {
        addid: this.sId,
        param: "",
        value: "",
        scopeId: this.id,
      };
      this.sopelist.push(obj);
      this.disisedit.push(false);
    },
    // 取消按钮
    closescope() {
      this.dialogFormVisible = false;
      this.isedit = false;
      this.adddata = {
        value: "",
      };
      this.sopelist = [
        {
          addid: 0,
          param: "",
          value: "",
          scopeId: 0,
        },
      ];
    },
    deletNoone(i) {
      this.sopelist.splice(i, 1);
      this.disisedit.splice(i, 1);
    },
    deletone(i) {
      this.sopelist = [];
      this.disisedit = [];
      const obj = {
        addid: 0,
        param: "",
        value: "",
        scopeId: 0,
      };
      this.sopelist.push(obj);
      this.disisedit.push(false);
    },
    editdeletNoone(i) {
      this.delList.push(this.sopelist[i]);
      this.sopelist.splice(i, 1);
      this.disisedit.splice(i, 1);
    },
    editanddeletNoone(i) {
      this.delList.push(this.sopelist[i]);
      this.sopelist.splice(i, 1);
      this.disisedit.splice(i, 1);
    },
    editdeletone(i) {
      this.delList.push(this.sopelist[i]);
      this.sopelist = [];
      this.disisedit = [];
      const obj = {
        addid: 0,
        param: "",
        value: "",
        scopeId: 0,
      };
      this.sopelist.push(obj);
      this.disisedit.push(false);
    },
    editdelescopelist(i) {
      this.$confirm("此操作为删除操作,是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteScopeByid({
            transId: "06234025",
            accessHost: "111",
            cifSeq: "11",
            id: this.sopelist[i].id,
            param: this.sopelist[i].param,
            value: this.sopelist[i].value,
            scopeId: this.sopelist[i].scopeId,
          }).then((res) => {
            if (res.data.code === "000000") {
              if (res.data.data.data) {
                this.$message({
                  type: "error",
                  message: "有模板引用该参数，不能删除",
                });
              } else {
                this.sopelist.length !== 1
                  ? this.editdeletNoone(i)
                  : this.editdeletone(i);
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    // 修改后删除
    editanddelete(i) {
      this.$confirm("此操作为修改操作，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteScopeByid({
            transId: "06234025",
            accessHost: "111",
            cifSeq: "11",
            id: this.oldarr[i].id,
            param: this.oldarr[i].param,
            value: this.oldarr[i].value,
            scopeId: this.oldarr[i].scopeId,
          }).then((res) => {
            if (res.data.code === "000000") {
              if (res.data.data.data) {
                this.$message({
                  type: "error",
                  message: "有模板引用该参数，不能删除",
                });
              } else {
                const index = this.modifyList.findIndex(
                  (e) => e.id === this.oldarr[i].id
                );
                this.modifyList.splice(index, 1);
                this.sopelist.length !== 1
                  ? this.editdeletNoone(i)
                  : this.editdeletone(i);
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    hasEditAndDele(item, i) {
      const index = this.oldarr.findIndex((e) => e.id === item.id);
      index !== -1 ? this.editanddelete(index) : this.editdelescopelist(i);
    },
    delelist(item) {
      if (!this.isedit) {
        const index = this.sopelist.findIndex(
          (item1) => item1.addid === item.addid
        );
        this.sopelist.length !== 1
          ? this.deletNoone(index)
          : this.deletone(index);
      } else {
        const index = this.sopelist.findIndex(
          (item1) => item1.addid === item.addid
        );
        if (index === 0) {
          const i = this.sopelist.findIndex((item1) => item1.id === item.id);
          this.oldarr.length !== 0
            ? this.hasEditAndDele(item, i)
            : this.editdelescopelist(i);
        } else {
          this.deletNoone(index);
        }
      }
    },
    issubmitdo() {
      this.sopelist.forEach((item, i, arr) => {
        if (item.param === "") {
          this.sopelist.splice(i, 1);
          this.issubmit = true;
        } else if (item.value === "") {
          this.issubmit = false;
        } else {
          this.newsarr = arr.map((j) => {
            return j.param;
          });
        }
      });
      if (this.repearr(this.newsarr)) {
        this.issubmit = false;
      } else {
        this.issubmit = true;
      }
    },
    repearr(arr) {
      const en = arr.length;
      const setLen = [...new Set(arr)].length;
      if (en !== setLen) {
        return true;
      } else {
        return false;
      }
    },
    addscopedo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.issubmitdo();
          if (this.issubmit) {
            const data = {
              transId: "06234020",
              accessHost: "20101",
              cifSeq: "300000454",
              value: this.adddata.value,
              list: this.sopelist,
            };
            addscoped(data).then((res) => {
              if (res.data.code === "000000") {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.dialogFormVisible = false;
                this.$emit("getlist");
              }
            });
          } else {
            this.$message({
              type: "error",
              message: "输入参数重复或格式错误，请检查重新输入",
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "输入参数重复或格式错误，请检查重新输入",
          });
          return false;
        }
      });
    },
    editdo(formName) {
      this.$confirm("此操作为修改是否继续 ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.issubmitdo();
              if (this.issubmit) {
                this.addList = [];
                this.sId = 0;
                if (this.sopelist.length !== 0) {
                  this.sopelist.forEach((item) => {
                    item.addid
                      ? this.addList.push(item)
                      : this.addList.push(item);
                  });
                } else {
                  this.sopelist.push({
                    addid: 0,
                    param: "",
                    value: "",
                    scopeId: 0,
                  });
                  this.$message({
                    type: "error",
                    message: "请输入内容",
                  });
                }
                updatascope({
                  transId: "06234021",
                  accessHost: "20101",
                  cifSeq: "300000454",
                  id: this.id,
                  value: this.adddata.value,
                  addList: this.addList,
                  delList: this.delList,
                  modifyList: this.modifyList,
                }).then((res) => {
                  if (res.data.code === "000000") {
                    if (res.data.data.list.length === 0) {
                      this.$message({
                        type: "success",
                        message: "修改成功",
                      });
                      this.dialogFormVisible = false;
                      this.$emit("getlist");
                    } else {
                      this.dialogFormVisible = false;
                      res.data.data.list.forEach((i) => {
                        this.message += `参数为：${i.param}、参数含义为：${i.value},有合同模板已引用，不能删除！`;
                      });
                      this.$message({
                        type: "error",
                        message: this.message,
                      });
                    }
                  }
                });
              } else {
                this.$message({
                  type: "error",
                  message: "输入参数重复或格式错误，请检查重新输入",
                });
              }
            } else {
              this.$message({
                type: "error",
                message: "输入参数重复或格式错误，请检查重新输入",
              });
              return false;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    submit(formName) {
      // 判断是否为修改
      if (this.isedit) {
        this.editdo(formName);
      } else {
        this.addscopedo(formName);
      }
    },
  },
};
</script>
<style  scoped>
.el-form-item {
  display: flex;
}
.nameinput {
  width: 50%;
}
.el-form-item /deep/label {
  white-space: nowrap;
}
.el-form-item /deep/.el-form-item__content {
  width: 100%;
}
.title {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.title li {
  float: left;
  font-weight: bold;
}
.list {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
  justify-content: space-around;
}
.list li {
  display: flex;
  align-items: center;
}
.list li i {
  margin-left: 10px;
  cursor: pointer;
}
.dolist {
  display: flex;
  width: 180px;
  justify-content: center;
}
.dolist span {
  margin: 0 5px;
  cursor: pointer;
}
.dolist span:nth-child(1) {
  color: rgb(8, 143, 19);
}
.dolist span:nth-child(2) {
  color: rgb(235, 57, 80);
}
.namedeit {
  margin: 0 10px;
}
</style>
